<template>
  <div>
    <el-row :gutter="1">
      <el-col :span="6">
        <!-- 第一个card -->
        <el-card>
          <Detail title="总销售额" count="129800" style="height: 100px;">
            <template slot="charts">
              <span>周同比&nbsp;&nbsp;56.67%
              </span>
            </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <Detail title="总销售额" count="129800" style="height: 100px;">
            <template slot="charts">
              <LineChart></LineChart>
            </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <Detail title="总销售额" count="129800" style="height: 100px;">
            <template slot="charts">
              <BarChart></BarChart>
            </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <Detail title="总销售额" count="129800" style="height: 100px;">
            <template slot="charts">
              <ProcessChart></ProcessChart>
            </template>
          </Detail>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Detail from '@/views/dashboard/Card/Detail/index.vue'
import LineChart from '@/views/dashboard/Card/LineChart/index.vue'
import BarChart from '@/views/dashboard/Card/BarChart/index.vue'
import ProcessChart from '@/views/dashboard/Card/ProcessChart/index.vue'

export default {
  components: {
    Detail,
    LineChart,
    BarChart,
    ProcessChart,
  },
  data() {
    return {}
  },
}
</script>

<style scoped lang="scss"></style>